<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Datagrid数据表格的使用</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css"  />
		<script type="text/javascript">
			$(function(){
				//$.messager.alert("标题","内容","warning");
				/*$.messager.confirm("标题:删除提示","内容:确定删除吗?",function(result){
					if (result) {
						alert("执行删除...");
					} else{
						alert("取消删除...")
					}
				});*/
				/*$.messager.prompt("标题:这是一个调查窗口","内容:你的名字是?",function(val){
					alert("你好, "+val);
				});*/
				/*$.messager.show({
					title : "标题:右下角窗口",
					msg : "内容:减价促销,<a href='#'>请猛戳这里</a>",
					timeout : 5000
				});*/
				/*$.messager.progress({
					interval:1000
				});
				window.setTimeout("$.messager.progress('close');",5000);*/
				/*$("#openBtn").click(function(){
					$("#myWindow").window('open');
				});*/
				$("#grid").datagrid({
					columns:[[
						{
							field:"id",
							title:"编号",
							width:100
						},
						{
							field:"name",
							title:"商品名称",
							width:100
						},
						{
							field:"price",
							title:"价格",
							width:100
						}
					]],
					url : "product.json",
					pagination : true,
					toolbar : [{
						id : "saveBtn",
						text : "保存",
						iconCls : "icon-save",
						handler : function(){
							alert("工具栏里的保存操作...");
						}
					}]
				});
			});
		</script>
	</head>
	<!--<body class="easyui-layout">-->
	<body>
		<!--<div data-options="region:'north',title:'易居岩管理系统'" style="height: 100px;">北部区域</div>
		<div data-options="region:'west'" style="width: 100px;">西部区域</div>
		<div data-options="region:'center'">中部区域</div>
		<div data-options="region:'east'" style="width: 80px;">东部区域</div>
		<div data-options="region:'south'" style="height: 80px;">南部区域</div>-->
		<!--<a href="#" class="easyui-menubutton" 
			data-options="iconCls:'icon-save',menu:'#mm'">系统菜单</a>
		<div id="mm" style="width:120px;">
			<div>菜单一</div>
			<div>菜单二</div>
			<div>菜单三</div>
			<div class="menu-sep"></div>
			<div>菜单四</div>
		</div>-->
		<!--<div id="myWindow" class="easyui-window" 
			data-options="title:'窗口标题',collapsible:false,modal:true,closed:true"
			 style="width: 200px;height:200px;">随便一个窗口内容</div>
		<input type="button" value="打开窗口" id="openBtn" />
		<input type="text" name="username" />-->
		<table id="grid"></table>
	</body>
</html>
